<template>
  <div class="layout">
    <van-nav-bar @click-left="$router.go(-1)" left-arrow title="个人信息"/>
    <div class="updateInfo">
      <img v-image-preview :src="userInfo.avatar" class="user-image" alt="图片加载失败"/>
      <p class="update-image" @click="clickAvatar">更换头像或者头饰</p>
    </div>

    <van-cell-group class="user-content">
      <van-cell title="账号：" :value="userInfo.account" @click="clickAccount"/>
      <van-cell title="昵称：" :value="userInfo.name" to="changeNick"/>
    </van-cell-group>

    <van-popup v-model="show" position="bottom" class="popup">
      <van-cell-group class="popup-top">
        <input class="hiddenInput" type="file" accept="image/*" @change="changeAvatar"/>
        <van-cell title="更换头像" @click="uploadHeadImg"/>
        <van-cell title="更换挂饰" @click="changeMiter"/>
      </van-cell-group>

      <van-cell-group class="popup-bottom">
        <van-cell title="取消" @click="cancel"/>
      </van-cell-group>
    </van-popup>
  </div>
</template>

<script>
export default {
  name: "updateUserInfo",
  data() {
    return {
      show: false,
      userInfo: {},
    }
  },
  created() {
    this.getUserInfo();
  },
  methods: {

    // 加载页面的时候获取用户数据实现数的获取
    async getUserInfo() {
      let res = await this.$axios.get(this.$api.current);
      if (res.status === 200) {
        this.userInfo = res.data;
      }
    },

    // 操作弹出框事件
    clickAvatar() {
      this.show = true;
    },
    clickAccount() {
      this.$toast("用户账号不能修改");
    },

    cancel() {
      this.show = false;
    },

    //更换头像(处理点击事件)
    uploadHeadImg() {
      this.$el.querySelector('.hiddenInput').click();
    },

    //更换头像（文件改变事件）
    async changeAvatar(e) {
      let file = e.target.files[0];

      //获取文件的大小是 大文件不上传
      if (file.size > 3 * 1024 * 1024) {
        this.$toast("文件太大");
        this.show = false;
        return;
      }

      let param = new FormData();
      param.append("file", file);
      param.append("userId", this.$store.getters.user.userId);
      param.append("oldImageSrc", this.userInfo.avatar);

      // 弹窗关闭
      this.show = false;

      //提交数据
      let res = await this.$axios.post(this.$api.changeAvatar, param);
      if (res.status === 200 && res.data.code === 200) {
        await this.getUserInfo();
        //先删除Vuex中的数据
        await this.$store.dispatch("clearCurrentState");
        // 再重新赋值
        await this.$store.dispatch("setUser", this.userInfo);
      }
    },

    //更换头饰
    changeMiter() {
      this.$toast("该功能还没实现");
      this.show = false;
    }

  }
}
</script>

<style scoped lang="less">
.layout {
  background-color: #fafafa;

  .van-nav-bar {
    background-color: #fafafa;
  }

  .updateInfo {
    background-color: #fff;
    text-align: center;

    .user-image {
      margin-top: 50/16rem;
      width: 100/16rem;
      height: 100/16rem;
      border-radius: 50%;
    }

    .update-image {
      margin: 20/16rem 0 0 0;
      color: orange;
      padding-bottom: 2rem;
    }
  }

  .user-content {
    .van-cell__value {
      flex: 3;
      text-align: left;
    }
  }

  .popup {
    width: 96%;
    background-color: #4C4C4C;
    margin-left: 2%;
    border-radius: 10px;

    .popup-top {
      background-color: #fff;
      text-align: center;
      border-radius: 10px;
      overflow: hidden;

      .hiddenInput {
        display: none;
      }

      .van-cell {
        color: #20a1ff;
        font-size: 16px;

        &:nth-child(1) {
          border-bottom: 1px solid #eeeeee;
        }
      }
    }

    .popup-bottom {
      background-color: #fff;
      overflow: hidden;
      border-radius: 10px;
      margin: 13/16rem 0;
      text-align: center;

      .van-cell {
        font-size: 16px;
        color: #20a1ff;
      }
    }
  }
}
</style>